<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Performance</title>
    <script type="text/javascript" src="../doc/asset/js/esl/esl.js"></script>
</head>
<body>
    <div id="main" style="width:100%;height:400px;border:1px solid green"></div>
    <div>
        <input id="round" value="10"/>次
        <input id="count" value="1000"/>个图形
        <select id='shape'>
            <option value='circle'>circle</option>
            <option value='sector'>sector</option>
            <option value='ring'>ring</option>
            <option value='ellipse'>ellipse</option>
            <option value='rectangle'>rectangle</option>
            <option value='text'>text</option>
            <option value='heart'>heart</option>
            <option value='droplet'>droplet</option>
            <option value='line'>line</option>
            <option value='image'>image</option>
            <option value='star'>star</option>
            <option value='isogon'>isogon</option>
        </select>
        <button id='run'>start</button>
        <button id='auto-run'>auto start</button>
    </div>
    <div id="res">loading</div>
    <script type="text/javascript">
    require.config({
        packages: [
            {
                name: 'zrender',
                location: '../src',
                main: 'zrender'
            }
        ]
    });

    
    require(
        [
            "zrender",
            'zrender/shape/Circle',
            'zrender/shape/Sector',
            'zrender/shape/Ring',
            'zrender/shape/Ellipse',
            'zrender/shape/Rectangle',
            'zrender/shape/Text',
            'zrender/shape/Heart',
            'zrender/shape/Droplet',
            'zrender/shape/Line',
            'zrender/shape/Image',
            'zrender/shape/Star',
            'zrender/shape/Isogon'
        ], 
        function(
            zrender,
            CircleShape,
            SectorShape,
            RingShape,
            EllipseShape,
            RectangleShape,
            TextShape,
            HeartShape,
            DropletShape,
            LineShape,
            ImageShape,
            StarShape,
            IsogonShape
        ) {
            // 初始化zrender
            zr = zrender.init(document.getElementById("main"));
            zrColor = require('zrender/tool/color');
            width = zr.getWidth();
            height = zr.getHeight();
            isRunning = false;
            document.getElementById('res').innerHTML = 'ready!<br/>';
            document.getElementById('run').onclick = start;
            document.getElementById('auto-run').onclick = autoStart;

            var ShapeClasses = {
                circle    :CircleShape,
                sector    :SectorShape,
                ring      :RingShape,
                ellipse   :EllipseShape,
                rectangle :RectangleShape,
                text      :TextShape,
                heart     :HeartShape,
                droplet   :DropletShape,
                line      :LineShape,
                image     :ImageShape,
                star      :StarShape,
                isogon    :IsogonShape
            };

            var t1 = 0;
            var t2 = 0;
            var t3 = 0;
            var zr;
            var isRunning;
            var zrColor;
            var width;
            var height;
            var round;
            var n;
            var result;
            var total;
            var shapeType;

            function start() {
                if (isRunning) {
                    return;
                }
                isRunning = true;
                document.getElementById('res').innerHTML += 'running ';

                round = document.getElementById('round').value;
                n = document.getElementById('count').value;
                result = [];
                total = 0;
                shapeType = document.getElementById('shape').value;
                setTimeout(run,50);
            }
            
            var sList = [
                'circle','sector','ring','ellipse','rectangle',
                'text','heart','droplet','line','image','star','isogon'
            ];
            var autoIdx = 0;
            var autoRun = false;
            function autoStart() {
                if (isRunning) {
                    return;
                }
                autoIdx = 0;
                autoRun = true;
                autoCheck();
            }
            function autoCheck() {
                if (autoRun && autoIdx < sList.length) {
                    document.getElementById('shape').value = sList[autoIdx++];
                    start();
                }
                else {
                    autoRun = false;
                    autoIdx = 0;
                }
            }

            function run(){
                if (round--) {
                    zr.clear();
                    for (var i = 0; i < n; i++) {
                        var ShapeClass = ShapeClasses[shapeType];
                        zr.addShape(new ShapeClass({
                            style: {
                                x: Math.round(Math.random() * width),
                                y: Math.round(Math.random() * height),
                                r0: Math.round(Math.random() * 10),
                                r: shapeType != 'rose'
                                    ? Math.round(Math.random() * 30)
                                    : [5 + Math.round(Math.random() * 5),
                                       10 + Math.round(Math.random() * 5),
                                       15 + Math.round(Math.random() * 5)],
                                n: Math.round(Math.random() * 10 + 2),
                                a: Math.round(Math.random() * 10),
                                b: Math.round(Math.random() * 30),
                                k: Math.round(Math.random() * 10),
                                lineWidth : 1,
                                width: Math.round(Math.random() * 100),
                                height: Math.round(Math.random() * 50),
                                xStart: Math.round(Math.random() * width),
                                yStart: Math.round(Math.random() * height),
                                xEnd: Math.round(Math.random() * width),
                                yEnd: Math.round(Math.random() * height),
                                startAngle : Math.round(Math.random() * 30),
                                endAngle: Math.round(Math.random() * 180) + 30,
                                image : 'test.jpeg',
                                text : shapeType == 'text' ? 'zrender' : false,
                                color: zrColor.random()
                            },
                            hoverable : false
                        }));
                    }
                    var ticket = new Date();
                    zr.render();
                    ticket = new Date() - ticket;
                    total += ticket
                    result.push(ticket);
                    setTimeout(run,50);
                }else {
                    isRunning = false;
                    document.getElementById('res').innerHTML +=
                        n + '个' + shapeType +
                        '平均render时间:' + Math.round(total/result.length)
                        + 'ms : [' + result.join(',') + ']<br/>';
                        console.log(t1, t2, t3); t1 = 0; t2 = 0; t3 = 0;
                    autoCheck();
                }
            }
        }
    );
    </script>

</body>
</html>